<template>
	<view class="login" :style="{marginTop:systemBarHeight+'px'}">
		<view class="header">
			<image src="../../static/images/commom/back.png" class="btn back" @tap = "back"></image>
			<!-- <image src="../../static/images/commom/close.png" cl/ass="btn close"></image> -->
		</view>
		<view class="container">
			<view class="title">
				WIKI
			</view>
			<view class="logininfo">
				<view class="zhuce">
					注册
				</view>
				<view class="input username">
					<input class="info" placeholder="请取个名字" @input = "userisexit" v-model="user"/>
					<view class="tips" v-show="isuser">
						{{useerrinfo}}
					</view>
					<view class="tips" v-show="!isuser">
						<image src="../../static/images/commom/succeful.png" class="tipimg"></image>
					</view>
				</view>
				<view class="input email">
					<input class="info" placeholder="请输入邮箱"  @input = "emailisexit" v-model="email"/>
					<view class="tips" v-show="isemail">
						{{emailerrinfo}}
					</view>
					<view class="tips" v-show="!isemail" >
						<image src="../../static/images/commom/succeful.png" class="tipimg"></image>
					</view>
				</view>
				<view class="input psw">
					<input class="info" :type="type" placeholder="这里输入密码" @input = "getpsw" />
					<view class="tips" @tap = "islook">
						<image src="../../static/images/commom/hide.png" 
						class="tipimg"
						v-show="!look">
						</image>
						<image src="../../static/images/commom/show.png" 
						class="tipimg"
						v-show="look">
						</image>
					</view>
				</view>
			</view>
			<view class="assign">
				<view class="btn" :class="{ok:isok}" @tap = "submit">
					注册
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import data from "../../commoms/data/data.js"
	import myfunc from "../../commoms/js/myfunction.js"
	export default {
		data() {
			return {
				type:'password',
				isuser:true,//用户名是否被使用
				isemail:true,//邮箱是否被使用
				emailerrinfo:'',//邮箱错误信息
				useerrinfo:'',//用户错误信息
				look:false,//是否显示密码
				user:'',
				email:'',
				psw:'',
				timer:null,
				systemBarHeight:''
			};
		},
		computed:{
			isok(){
				if(!this.isuser  && !this.isemail && this.psw.length > 6){
					return true
				}else{
					return false
				}
			}
		},
		onLoad(){
			this.getSysteminfo();
		},
		methods:{
			getSysteminfo() {//获取系统栏高度
				uni.getSystemInfo({
					success: (res) => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			back(){
				uni.navigateBack({
				    detla:1,
				})
			},
			islook(){//是否显示密码
				this.look = !this.look;
				if(this.look){
					this.type = 'text'
				}else{
					this.type = 'password'
				}
			},
			userisexit:myfunc.debounce(function(e){
				this.user = e.detail.value
				if(e.detail.value == ""){
					this.isuser = true
					this.useerrinfo = ""
					return
				}
				uni.request({
					url:this.serverurl + 'siginup/judge',
					data:{
						data:e.detail.value,
						type:'name'
					},
					method:'POST',
					success:(result)=>{
						if(result.data.status == 200){
							if(result.data.data == 0){
								this.isuser = false
							}else{
								this.isuser = true
								this.useerrinfo = "被占用"
							}
						}else if(result.data.status == 500){
							this.isuser = true
							this.useerrinfo = "网络异常"
							uni.showToast({
							    title: '网络出现问题',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
						}
					}
				})
			},800),
			emailisexit:myfunc.debounce(function(e){
				let emailrexg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if(!emailrexg.test(e.detail.value)){
					this.isemail = true;
					this.emailerrinfo = "邮箱格式错误"
					return;
				}else{
					this.isemail = false;
					this.emailerrinfo = ""
				}
				uni.request({
					url:this.serverurl+"siginup/judge",
					data:{
						data:e.detail.value,
						type:'email',
					},
					method:'POST',
					success:(result)=>{
						if(result.data.status == 200){
							if(result.data.data == 0){
								this.isemail = false
							}else{
								this.isemail = true
								this.emailerrinfo = "邮箱被占用"
							}
						}else if(result.data.status == 500){
							uni.showToast({
							    title: '网络出现问题',
							    duration: 2000,
								icon:'none',
								position:'top'
							});
						}
					}
				})
			},800),
			getpsw(e){
				this.psw = e.detail.value;
			},
			submit(){//点击注册
				if(!this.isok){
					return
				}
				uni.request({
					url:this.serverurl+"siginup/add",
					data:{
						name:this.user,
						email:this.email,
						psw:this.psw
					},
					method:'POST',
					success:(result)=>{					
						if(result.data.status == 200){
							this.isuser = true;
							this.isemail = true;
							this.emailerrinfo = ''
							this.useerrinfo = ''
							uni.navigateTo({
								url:"../llogin/llogin?user="+this.user
							})
							this.user = '';
							this.email = '';
							this.psw = '';
							
						}else if(result.data.status == 500){
							uni.showToast({
								title: '网络出现问题',
								duration: 2000,
								icon:'none',
								position:'top'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.login{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	.header{
		height: 120rpx;
		width: 100%;
		padding: 0 42rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		.btn{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.container{
		position: absolute;
		top: 120rpx;
		bottom: 0;
		width: 100%;
		.title{
			margin-top: 84rpx;
			width: 100%;
			color: rgba(52, 199, 88, 100);
			font-size: 48px;
			text-align: center;
			font-weight: bold;
			font-family: Times New Roman-regular;
		}
		.logininfo{
			margin-top: 60rpx;
			padding: 0 66rpx;
			.zhuce{
				color: rgba(16, 16, 16, 100);
				font-size: 56rpx;
				text-align: left;
				font-family: PingFangSC-regular;
				font-weight: bold;
				margin-bottom: 100rpx;
			}
			.input{
				box-sizing: border-box;
				width: 100%;
				height: 88rpx;
				border-bottom: 1px solid rgba(187, 187, 187, 100);
				padding: 24rpx;
				margin-bottom: 60rpx;
				.info{
					display: inline-block;
					color: rgba(158, 158, 158, 100);
					font-size: 32rpx;
					font-weight: bold;
					height: 44rpx;
				}
				.tips{
					float: right;
					display: inline-block;
					color: rgba(255, 45, 85, 100);
					font-size: 28rpx;
					font-weight: bold;
					.tipimg{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.assign{
			width: 100%;
			box-sizing: border-box;
			padding: 0 132rpx;
			.btn{
				height: 88rpx;
				line-height: 88rpx;
				opacity: 0.78;
				border-radius: 32rpx;
				background-color: rgba(189, 189, 189, 100);
				text-align: center;
				color: rgba(255, 255, 255, 100);
				font-size: 36rpx;
				font-weight: bold;
				&.ok{
					background-color: rgba(52, 199, 88, 100);
				}
			}
		}	
	}
	
}
</style>
